// import React, { Component } from 'react'
// //引入context文件
// import Context from './MyContext'
// //引入子组件
// import Com from './Com copy'
// class App extends Component {
//     constructor() {
//         super()
//         this.state = {
//             resume: {
//                 base: {
//                     name: '',
//                     age: '',
//                     genders: 'male'
//                 },
//                 exp: {
//                     year: '',
//                     comp: '',
//                     job: '',
//                     detail: '',
//                     area: 'lime'
//                 }
//             }
//         }
//     }

//     render() {
//         console.log(this.state.resume)
//         return (
//             <div>
//                 <Context.Provider value={{resume:this.state.resume}}>
//                     <Com />
//                 </Context.Provider>
//             </div>
//         )
//     }
// }
// export default App

import React, { Component } from 'react';
import { NavLink} from 'react-router-dom';

// import Checkbox from './checkbox.jsx';
// import AllCheck from './allcheck.jsx';
// import All from './all.jsx';
import All1 from './Com copy';

class View extends Component{
    constructor(props){
        super(props);
        this.state = {
            name:'',
            year:'',
            comp:'',
            exp:{
                year:'',
                comp:'',
                job:'',
            },
            resume:{
                base:{
                    name:'',
                    age:'',
                    genders:'male'
                },
                exp:{
                    year:'',
                    comp:'',
                    job:'',
                    detail:'',
                    area:'lime'
                }
            }
        }
    }
    // 单个input
    handleChange(e){
        // 获取 input 元素上的value
        let value = e.target.value;
        this.setState({
            name:value
        })
    }
    // 多个input
    _handleChange(e){
        // 获取 input 元素上的value
        let name = e.target.name;
        let value = e.target.value;
        this.setState({
            [name]:value
        })
    }
    // 多个input exp
    __handleChange(e){
        // 获取 input 元素上的value
        let name = e.target.name;
        let value = e.target.value;
        const exp = this.state.exp;
        // year exp.year = value
        // comp exp.comp = value
        // job exp.job = value
        exp[name] = value;
        this.setState({exp})
    }
    // 多个input exp
    ___handleChange(e){
        // 获取 input 元素上的value
        let name = e.target.name;
        let value = e.target.value;
        const resume = this.state.resume;
        const namekey = e.target.getAttribute('namekey');
        // resume.base.name = name;
        // resume.base.age = age;
        // resume.exp.job = job;
        resume[namekey][name] = value;

        this.setState({resume})
        /**
            第一步
                设置state 默认值
            第二步
                写jsx 中 input
                    value
                    onChange
                如果多input 或深层次
                    增加name属性
                如果多个input 较深层次
                    除了 增加默认的name 还需自定义一个namekey
            第三步
                在onChange 方法中定义setState

            SP
                对象的[]用法与场景
            作业
            1、实现checkbox
            2、正选 反选
        **/
    }
    render(){

        return (
            <div className="input_con">
                <h2>input 表单课</h2>
                <ul>
                    <li>用户名：{this.state.name}</li>
                    <li>
                        <label>用户名</label>
                        <div className="lable_ctrl">
                            <input type="text" value={this.state.name}
                            placeholder="请输入用户名" onChange={(e)=>this.handleChange(e)}/>
                        </div>
                    </li>
                </ul>
                <ul>
                    <li>工作年限：{this.state.year}</li>
                    <li>
                        <label>工作年限</label>
                        <div className="lable_ctrl">
                            <input type="text" name="year" value={this.state.year}
                            placeholder="请输入工作年限" onChange={(e)=>this._handleChange(e)}/>
                        </div>
                    </li>
                    <li>公司名称：{this.state.comp}</li>
                    <li>
                        <label>公司名称</label>
                        <div className="lable_ctrl">
                            <input type="text" name="comp" value={this.state.comp}
                            placeholder="请输入公司名称" onChange={(e)=>this._handleChange(e)}/>
                        </div>
                    </li>
                </ul>
                <ul>
                    <li>工作年限：{this.state.exp.year}</li>
                    <li>
                        <label>工作年限</label>
                        <div className="lable_ctrl">
                            <input type="text" name="year" value={this.state.exp.year}
                            placeholder="请输入工作年限" onChange={(e)=>this.__handleChange(e)}/>
                        </div>
                    </li>
                    <li>工作年限：{this.state.exp.comp}</li>
                    <li>
                        <label>公司名称</label>
                        <div className="lable_ctrl">
                            <input type="text" name="comp" value={this.state.exp.comp}
                            placeholder="请输入公司名称" onChange={(e)=>this.__handleChange(e)}/>
                        </div>
                    </li>
                    <li>工作职责：{this.state.exp.job}</li>
                    <li>
                        <label>工作职责</label>
                        <div className="lable_ctrl">
                            <input type="text" name="job" value={this.state.exp.job}
                            placeholder="请输入工作职责" onChange={(e)=>this.__handleChange(e)}/>
                        </div>
                    </li>
                </ul>
                <h2>resume</h2>
                <ul>
                    <li>姓名：{this.state.resume.base.name}</li>
                    <li>
                        <label>姓名</label>
                        <div className="lable_ctrl">
                            <input type="text" name="name" namekey="base" value={this.state.resume.base.name}
                            placeholder="请输入姓名" onChange={(e)=>this.___handleChange(e)}/>
                        </div>
                    </li>
                    <li>年龄：{this.state.resume.base.age}</li>
                    <li>
                        <label>年龄</label>
                        <div className="lable_ctrl">
                            <input type="text" name="age" namekey="base" value={this.state.resume.base.age}
                            placeholder="请输入年龄" onChange={(e)=>this.___handleChange(e)}/>
                        </div>
                    </li>
                    <li>工作职责：{this.state.resume.exp.job}</li>
                    <li>
                        <label>工作职责</label>
                        <div className="lable_ctrl">
                            <input type="text" name="job" namekey="exp" value={this.state.resume.exp.job}
                            placeholder="请输入工作职责" onChange={(e)=>this.___handleChange(e)}/>
                        </div>
                    </li>
                    <li>工作详情：{this.state.resume.exp.detail}</li>
                    <li>
                        <label>工作详情</label>
                        <div className="lable_ctrl">
                            <textarea name="detail" namekey="exp" value={this.state.resume.exp.detail} onChange={(e)=>this.___handleChange(e)}></textarea>
                        </div>
                    </li>
                    <li>手机号的区号：{this.state.resume.exp.area}</li>
                    <li>
                        <label>手机号的区号</label>
                        <div className="lable_ctrl">
                            <select name="area" namekey="exp" defaultValue={this.state.resume.exp.area} onChange={(e)=>this.___handleChange(e)}>
                                <option value="grapefruit">葡萄柚</option>
                                <option value="lime">酸橙</option>
                                <option value="coconut">椰子</option>
                                <option value="mango">芒果</option>
                            </select>
                        </div>
                    </li>
                    <li>性别：{this.state.resume.base.genders}</li>
                    <li>
                        <label>性别</label>
                        <div className="lable_ctrl">
                            <label>男<input type="radio" name="genders" namekey="base" value="male" onClick={(e)=>this.___handleChange(e)} defaultChecked={this.state.resume.base.genders==='male'}/></label>
                            <label htmlFor="gender">女</label><input name="genders" namekey="base" value="female" id="gender" type="radio" defaultChecked={this.state.resume.base.genders==='female'} onClick={(e)=>this.___handleChange(e)}/>
                        </div>
                    </li>
                </ul>
                <All1/>
            </div>
        )
    }
}
export default View;